<HTML>
<!--
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)1998 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun,
J. Brook Monroe nor Charles River Media will be held responsible for any
unwanted effects due to the use of this applet or any derivative.
-->
<HEAD>
<TITLE>Getting All Keyed Up I</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2"><!--
function getKeyPress(evt)
{
// Convert character code to string representation
document.forms[0].key.value = '"'+String.fromCharCode(evt.which)+'"';
var modString = "";
mods = parseInt(evt.modifiers);
if (mods & Event.ALT_MASK) // 1
modString += "ALT ";
if (mods & Event.CONTROL_MASK) // 2
modString += "CTRL ";
if (mods & Event.SHIFT_MASK) // 4
modString += "SHIFT ";
if (mods & Event.META_MASK) // 8???
modString += "META";
document.forms[0].mods.value = modString;
return routeEvent(evt); // Just in case
}
function Setup()
{
window.captureEvents(Event.KEYPRESS);
window.onKeyPress=getKeyPress;
window.focus();
}
function TidyUp()
{
window.releaseEvents(Event.KEYPRESS);
}
//-->
</SCRIPT>
</HEAD>
<BODY onUnload="TidyUp()">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50 ALIGN = LEFT>Getting All Keyed Up I</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
Finally, some keyboard input! Type a letter or two on the keyboard; the script will capture it and echo it into the form below.
</FONT>
<FORM>Key pressed: <INPUT TYPE="text" SIZE=4 NAME="key"> with keyboard modifiers <INPUT TYPE="text" SIZE=18 name="mods"><BR>
</FORM><p>
<SCRIPT LANGUAGE="JavaScript1.2">Setup()</SCRIPT>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
You're just going to have to trust us here: neither of the form text fields has input focus while you're typing!
We deliberately put quotes around the incoming characters to persuade you that the event handler is getting the keys,
not the input text field. A quick peek at the code for this script will prove we're on the up-and-up!<p>
One thing you can't do easily is capture the state of the <i>Ctrl</i> and <i>Alt</i> keys while handling keyboard
input. This is because the browser program itself expects to catch key sequences like <i>Ctrl-A</i> (mark all text) or
<i>Alt-E</i> (open Edit menu), and gets them before the JavaScript engine does. Catching <i>Shift</i> seems to work every time.<p>
The script as written will try to echo non-printable characters into the form (press Enter or Backspace to see this). As
an exercise, modify the event handler to echo only printable characters (character codes 32 through 127) into the form.
</FONT>
<BR><BR><h5>Copyright ©1998 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>